<template>
    <main-wrap :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="recordtbWrap">
            <ul class="anwScroll anw-item-list">
                <li>
                    <div class="title">Gold Coins</div>
                    <div class="amount">
                        <p>Current Balance</p>
                        <h5 v-if="assets.goldTotalAmount">{{assets.goldTotalAmount.decimalTwoString}}</h5>
                    </div>
                    <div class="szmx-tabBox">
                        <div class="item">
                            <p>Cumulative</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>today</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>thisweek</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>Thismonth</p>
                            <h5>--</h5>
                        </div>
                    </div>
                    <div class="rdtablebox c-scroll-bar">
                        <record-table :lists='GOLD'/>
                        <div class="notrData" v-if="!GOLD || GOLD.length<1">
                            No Transaction Data
                        </div>
                    </div>
                </li>
                <li>
                    <div class="title">CXT</div>
                    <div class="amount">
                        <p>Current Balance</p>
                        <h5 v-if="assets.cxtTotalAmount">{{assets.cxtTotalAmount.decimalTwoString}}</h5>
                    </div>
                    <div class="szmx-tabBox">
                        <div class="item">
                            <p>Cumulative</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>today</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>thisweek</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>Thismonth</p>
                            <h5>--</h5>
                        </div>
                    </div>
                    <div class="rdtablebox c-scroll-bar">
                        <record-table :lists='CXT'/>
                        <div class="notrData" v-if="!GOLD || GOLD.length<1">
                            No Transaction Data
                        </div>
                    </div>
                </li>
                <li>
                    <div class="title">BCXT</div>
                    <div class="amount">
                        <p>Current Balance</p>
                        <h5 v-if="assets.bcxtTotalAmount">{{assets.bcxtTotalAmount.decimalTwoString}}</h5>
                    </div>
                    <div class="szmx-tabBox">
                        <div class="item">
                            <p>Cumulative</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>today</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>thisweek</p>
                            <h5>--</h5>
                        </div>
                        <div class="item">
                            <p>Thismonth</p>
                            <h5>--</h5>
                        </div>
                    </div>
                    <div class="rdtablebox c-scroll-bar">
                        <record-table :lists='BCXT'/>
                        <div class="notrData" v-if="!GOLD || GOLD.length<1">
                            No Transaction Data
                        </div>
                    </div>
                </li>
            </ul>  
        </div>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import back from "@/components/back.vue";
import sort from '@/components/sort.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import recordTable from './components/recordTable.vue';
import empty from '@/components/empty.vue'
export default {
    components:{
        mainWrap,
        back,
        sort,
        mySearch,
        Image,
        recordTable,
        empty
    },
    setup(){
        const store = useStore()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            limit:100,
            page:1,
            assets:'',
            GOLD:[],  //金币记录
            CXT:[], // CXT记录
            BCXT:[] // BCXT
        })

        onMounted(()=>{
            getAssets()
           getRecord('GOLD')
           getRecord('CXT')
           getRecord('BCXT')
        })
        const getAssets =()=>{
            // 获取我的资产
            store.dispatch('capital/get_my_assets',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.assets = res.data
            })
        }

        const getRecord =(type)=>{
            store.dispatch('capital/get_trade_record',{
                assetsType:type,
                limit:state.limit,
                page:state.page,
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                if(res.success){
                    state[type] = res.data || []
                }
            })
        }

               

        return {
            ...toRefs(state),
        }
    }
}
</script>

<style lang="scss" scoped>
   
    .recordtbWrap{
        height: 100%;
        width: 100%;
        overflow: hidden;
        padding: 30px 30px 30px 0;
        .anwScroll{
            width: 100%;
            height: 100%;
            overflow-x: auto;
        }
        .anw-item-list{
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            li{
                display: flex;
                flex-flow: column;
                flex: 1;
                min-width: 450px;
                padding: 30px 20px;
                background: url(/images/capital/rk1.png) left top no-repeat;
                background-size:100% 100%;
                &+li{
                    margin-left: 20px;
                }
                .rdtablebox{
                    flex: 1;
                    width: 100%;
                    overflow: hidden;
                    overflow-y: auto;
                    .notrData{
                        font-size: 24px;
                        padding: 100px;
                        text-align: center;
                    }
                }
                .title{
                    font-family: Poppins-SemiBold Italic, Poppins;
                    font-weight: normal;
                    color: #C5FAFF;
                    text-shadow: 0px 0px 6px #07A3FB;
                    //-webkit-background-clip: text;
                    //-webkit-text-fill-color: transparent;
                    text-align: center;
                    font-size:28px;
                    line-height: 50px;
                    height: 50px;
                    margin: 0 0 15px 0;
                }
                .amount{
                    background: rgba(103,248,255,0.2000);
                    line-height: normal;
                    padding: 8px 0 5px 0;
                    margin: 0;
                    p{
                        text-align: center;
                        font-weight: 500;
                        font-size: 22px;
                        padding: 0;
                        margin: 0;
                    }
                    h5{
                        padding: 6px 0 0 0;
                        margin: 0;
                        font-size: 28px;
                        text-align: center;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                }
                .szmx-tabBox{
                    display: flex;
                    height: 80px;
                    text-align: center;
                    line-height: normal;
                    margin: 10px 0 0 0;
                    .item{
                        flex: 1;
                        p{
                            font-size: 18px;
                            font-weight: 500;
                            color: rgba(255,255,255,0.5000);
                        }
                        h5{
                            font-size: 22px;
                            font-weight: 500;
                            color: #FFFFFF;
                        }
                    }
                }

            }
            
        }
    }
 
</style>